<template>
  <div class="home-container">
    <Banner />
    <div class="layout">
      <div class="sidebar">
        <h3>商品分类</h3>
        <ul>
          <li v-for="menu in menuList" :key="menu.id" :class="{ active: $route.path === '/'+menu.id }">
            <router-link :to="'/'+menu.id">{{ menu.name }}</router-link>
          </li>
        </ul>
      </div>
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Banner from '../components/Banner.vue';
import { useRoute } from 'vue-router';
const $route = useRoute();
const menuList = [
  { id: 'phone', name: '手机' },
  { id: 'laptop', name: '笔记本' },
  { id: 'accessory', name: '配件' }
];
</script>

<style scoped>
.home-container { max-width: 1200px; margin: 0 auto; }
.layout { display: flex; }
.sidebar { width: 200px; background: #f8f8f8; padding: 1rem; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { margin: 0.5rem 0; }
.sidebar li.active a { color: #fff; background: green; padding: 0.5rem; border-radius: 4px; }
.sidebar a { text-decoration: none; color: #333; }
.content { flex: 1; padding: 1rem; }
</style>